<template>
	<div>
		<button @click="change(ACom)">A</button>
		<button @click="change(BCom)">B</button>
		<!-- <button @click="change('ACom')">A</button>
		<button @click="change('BCom')">B</button>
		<button @click="change('CCom')">C</button> -->
		<component :is="com"></component>
	</div>
</template>

<!-- TODO setup模式 ，动态组件需要使用组件实例，而不是组件名。使用 响应数据ref或者reactive代理组件 会有一些性能开销，使用markRaw即可避免，也就是不劫持一些属性 -->
<script setup lang="ts">
import ACom from './A.vue'
import BCom from './B.vue'
import { markRaw, shallowRef } from 'vue'
const com = shallowRef(markRaw(ACom))
function change(data: any) {
	console.log(markRaw(data))
	com.value = markRaw(data)
}
</script>

<!-- TODO export default 模式，component 需要使用组件名 -->
<!-- <script lang="ts">
import { defineAsyncComponent, ref } from 'vue';
export default {
	components: {
		ACom: defineAsyncComponent(() => import('./A.vue')),
		BCom: defineAsyncComponent(() => import('./B.vue')),
	},
	setup() {
		const com = ref('ACom');
		function change(data: any) {
			com.value = data;
		}
		return { com, change };
	},
};
</script>
 -->
